/**
 * 第一步：核心配置组件
 * 包含项目名称、项目类型、项目描述
 */
import React from 'react';
import { Form, Input, Select } from 'antd';
import { ProjectTypeOption } from '@/types/project';

const { Option } = Select;
const { TextArea } = Input;

interface BasicConfigStepProps {
  projectTypes: ProjectTypeOption[];
}

const BasicConfigStep: React.FC<BasicConfigStepProps> = ({ projectTypes }) => {
  return (
    <>
      <Form.Item
        name="projectName"
        label="项目名称"
        rules={[
          { required: true, message: '请输入项目名称' },
          { min: 3, message: '项目名称至少3个字符' },
          { 
            pattern: /^[a-zA-Z0-9_-]+$/, 
            message: '项目名称只能包含英文字母、数字、下划线和连字符' 
          }
        ]}
      >
        <Input 
          placeholder="例如：my-awesome-project" 
          maxLength={50}
        />
      </Form.Item>

      <Form.Item
        name="projectType"
        label="项目类型"
        rules={[{ required: true, message: '请选择项目类型' }]}
        tooltip="选择您要创建的项目类型"
      >
        <Select 
          placeholder="选择项目类型" 
          allowClear
          optionLabelProp="label"
          styles={{
            popup: {
              root: { maxHeight: 400, overflow: 'auto' }
            }
          }}
        >
          {projectTypes.map(type => (
            <Option 
              key={type.id} 
              value={type.id}
              label={type.name}
            >
              <div className="py-2">
                <div className="font-medium text-gray-900">
                  {type.name}
                </div>
                {type.description && (
                  <div className="text-gray-500 text-xs mt-1 leading-4 max-w-full overflow-hidden">
                    <div className="truncate" title={type.description}>
                      {type.description}
                    </div>
                  </div>
                )}
              </div>
            </Option>
          ))}
        </Select>
      </Form.Item>
      
      <Form.Item
        name="description"
        label="项目简介"
        rules={[{ max: 500, message: '描述不能超过500个字符' }]}
      >
        <TextArea 
          placeholder="输入项目的简要描述（可选）" 
          rows={4} 
          maxLength={500}
        />
      </Form.Item>
    </>
  );
};

export default BasicConfigStep;
